$(() => {
    banner();
});

function banner() {
    let render = function () {
        let windowWidth = $(window).width();
        let isScreen = windowWidth <= 768;

        let itemArr = $('#main-carousel > .carousel-inner > .item');

        itemArr.each((i, item) => {
            let $item = $(item);

            let imgScr = isScreen ? $item.data('image-xs') : $item.data('image-lg');

            if (isScreen) {
                let mb_image = `<a href="#" class="mb-imageBox"><img src="${imgScr}" alt=""></a>`;
                $item.html(mb_image);
            } else {
                let pc_image = `<a href="#" class="pc-imageBox"><img src="${imgScr}"alt=""></a>`;
                $item.html(pc_image);
            }
        });
    };

    $(window).on('resize', () => {
        render();
    }).trigger('resize');


    let startX = 0;
    let moveX = 0;
    let distanceX = 0;
    let isMove = false;

    $('.carousel-inner').on('touchstart', (e) => {
        startX = e.originalEvent.touches[0].clientX;
    });

    $('.carousel-inner').on('touchmove', (e) => {
        moveX = e.originalEvent.touches[0].clientX;
        distanceX = moveX - startX;
        isMove = true;
    });

    $('.carousel-inner').on('touchend', (e) => {
        if (Math.abs(distanceX) > 50 && isMove) {
            if (distanceX > 0) {
                $('.carousel').carousel('prev');
            } else {
                $('.carousel').carousel('next');
            }
        }
    });

    startX = 0;
    moveX = 0;
    distanceX = 0;
    isMove = false;
}